<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>微前端 | 小康-技术博客</title><meta name="author" content="小康"><meta name="copyright" content="小康"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="微前端">
<meta property="og:type" content="article">
<meta property="og:title" content="微前端">
<meta property="og:url" content="https://codeslive.top/2023/06/03/%E5%BE%AE%E5%89%8D%E7%AB%AF/index.html">
<meta property="og:site_name" content="小康-技术博客">
<meta property="og:description" content="微前端">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101148806.webp">
<meta property="article:published_time" content="2023-06-03T02:22:27.384Z">
<meta property="article:modified_time" content="2023-06-10T03:49:05.244Z">
<meta property="article:author" content="小康">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101148806.webp"><link rel="shortcut icon" href="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101307395.webp?x-oss-process=style/webp"><link rel="canonical" href="https://codeslive.top/2023/06/03/%E5%BE%AE%E5%89%8D%E7%AB%AF/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '微前端',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-06-10 11:49:05'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="小康-技术博客" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101307395.webp?x-oss-process=style/webp" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">16</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">0</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">5</div></a></div><hr/></div></div><div class="post" id="body-wrap"><header class="not-top-img fixed" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="小康-技术博客"><span class="site-name">小康-技术博客</span></a></span><div id="menus"><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">微前端</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-06-03T02:22:27.384Z" title="Created 2023-06-03 10:22:27">2023-06-03</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-06-10T03:49:05.244Z" title="Updated 2023-06-10 11:49:05">2023-06-10</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="微前端"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h1 id="微前端"><a href="#微前端" class="headerlink" title="微前端"></a>微前端</h1><h3 id="一、webComponents"><a href="#一、webComponents" class="headerlink" title="一、webComponents"></a>一、webComponents</h3><blockquote>
<p>Web Components是一项Web标准，它提供了一种创建可重用Web组件的方式，这些组件可以通过一个统一的编程模型来创建和使用。</p>
<p>Web Components主要由以下三个技术组成：</p>
<ol>
<li><p>Custom Elements：这允许您创建指定名称的新HTML元素，该元素可以包含自定义的JavaScript和CSS。</p>
</li>
<li><p>Shadow DOM：它提供了一种隔离特定元素的DOM和样式，从而可以防止样式和DOM冲突。</p>
</li>
<li><p>Template：模板允许您定义HTML模板，这些模板可以在需要时进行克隆。</p>
</li>
</ol>
<p>使用Web Components可以将UI组件封装到独立的、可重用的自定义元素中，从而可以避免命名冲突和代码重复。这样代码更具有可维护性和可扩展性，并且可以轻松地与任何框架或库集成。此外，Web Components还符合跨浏览器、跨平台和性能优化等方面的最佳实践。</p>
<p>总之，Web Components提供了一种用于创建可重用Web组件的标准方式。使用Web Components可以简化Web开发过程并提高代码的可维护性、可重用性和性能。</p>
</blockquote>
<p>案例</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>webComponents<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./index.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">wu-jie</span>  <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">url</span>=<span class="string">&quot;https://codeslive.top&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">wu-jie</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>我是外层的div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;wujie&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">      <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="language-css">      &#125;</span></span><br><span class="line"><span class="language-css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>我是template里面的div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Wujie</span> <span class="keyword">extends</span> <span class="title class_ inherited__">HTMLElement</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">super</span>();</span><br><span class="line">      <span class="comment">// shadowdom 样式隔离</span></span><br><span class="line">      <span class="keyword">let</span> dom = <span class="variable language_">this</span>.<span class="title function_">attachShadow</span>(&#123; <span class="attr">mode</span>: <span class="string">&quot;open&quot;</span> &#125;);</span><br><span class="line">      <span class="comment">// 模板</span></span><br><span class="line">      <span class="keyword">let</span> template = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;#wujie&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLTemplateElement</span>;</span><br><span class="line">      <span class="comment">// 拷贝模板</span></span><br><span class="line">      dom.<span class="title function_">appendChild</span>(template.<span class="property">content</span>.<span class="title function_">cloneNode</span>(<span class="literal">true</span>));</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 输出属性</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="title function_">getAttr</span>(<span class="string">&#x27;url&#x27;</span>), <span class="variable language_">this</span>.<span class="title function_">getAttr</span>(<span class="string">&#x27;age&#x27;</span>));</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 获取属性</span></span><br><span class="line">    <span class="keyword">private</span> <span class="title function_">getAttr</span>(<span class="params">attr: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">getAttribute</span>(attr);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 生命周期自动触发有东西插入</span></span><br><span class="line">    <span class="title function_">connectedCallback</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;类似 vue 的 mounted&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 生命周期挂载</span></span><br><span class="line">    <span class="title function_">disconnectedCallback</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;类似 vue 的 destroy&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 跟watch类似</span></span><br><span class="line">    <span class="title function_">attributeChangedCallback</span>(<span class="params">name: <span class="built_in">string</span>, oldVal: <span class="built_in">string</span>, newVal: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;跟 vue 的 watch 类似 有属性发生变化自动触发&#x27;</span>, name, oldVal, newVal);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">customElements</span>.<span class="title function_">define</span>(<span class="string">&#x27;wu-jie&#x27;</span>, <span class="title class_">Wujie</span>); <span class="comment">// 挂载完成</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="二、pnpm底层原理和monorepo架构"><a href="#二、pnpm底层原理和monorepo架构" class="headerlink" title="二、pnpm底层原理和monorepo架构"></a>二、pnpm底层原理和monorepo架构</h3><h5 id="pnpm"><a href="#pnpm" class="headerlink" title="pnpm"></a>pnpm</h5><blockquote>
<p>pnpm是一种快速、省空间的包管理工具，它的主要优势如下：</p>
<ol>
<li><p>快速安装：pnpm通过对已安装的包进行链接，而不是在每个项目中复制和粘贴依赖项，从而比npm和yarn更快地安装依赖项。</p>
</li>
<li><p>省空间：使用pnpm可以显著减少磁盘空间的使用量，因为它只会在一个地方存储每个依赖项的一个拷贝。</p>
</li>
<li><p>更少的网络流量：使用pnpm可以减少网络流量，因为它只需要从网络上下载需要的依赖项，而不会像npm或yarn那样多次下载同一个包。</p>
</li>
<li><p>并行安装：pnpm支持并行安装和更新依赖项，从而可以加快构建时间。</p>
</li>
<li><p>集成：pnpm能够与npm和yarn的生态系统无缝集成，因此您可以在不丢失任何功能的情况下，使用pnpm来安装和管理您的npm和yarn包。</p>
</li>
<li><p>更小的包：由于pnpm安装依赖项的方式不同于npm和yarn，所以它可以将原本分散在许多包中的代码聚合到单个包中，从而可以减少包的数量和大小。</p>
</li>
<li><p>远程缓存：pnpm具有远程缓存功能，可以在本地存储所有依赖项的副本，从而可以在缺少网络连接时离线安装依赖项并加快速度。</p>
</li>
</ol>
<p>总的来说，pnpm使用简单、快速、省空间，提高了开发和构建的效率。</p>
</blockquote>
<ol>
<li>安装pnpm</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i pnpm -g</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>创建硬链接</li>
</ol>
<p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306031301757.webp" alt="创建链接符号"></p>
<p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306031303933.webp" alt="建立链接"></p>
<p>流程图</p>
<p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306031309717.webp" alt="流程图"></p>
<ol start="3">
<li>创建软链接</li>
</ol>
<p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306031314276.webp" alt="软链接"></p>
<blockquote>
<p>pnpm它是通过软硬链接的方式指向同一份依赖.pnpm store，通过这种方式可以减少相同依赖频繁的下载（节省磁盘空间）</p>
</blockquote>
<p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306031323320.webp" alt="流程图"></p>
<ol start="4">
<li>pnpm常用命令</li>
</ol>
<blockquote>
<p><code>pnpm</code>大部分命令和<code>npm</code>是一样的</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm import</span><br></pre></td></tr></table></figure>

<p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306031329438.webp" alt="import"></p>
<h5 id="monorepo架构"><a href="#monorepo架构" class="headerlink" title="monorepo架构"></a>monorepo架构</h5><blockquote>
<p>Monorepo（或称为单体仓库）是一种软件开发模式，它指的是将所有相关代码放在一个单一的代码仓库内，而不是拆分成多个独立的仓库。</p>
<p>Monorepo的主要优点之一是可以极大地减少开发和部署的时间。通过在一个代码仓库内管理多个项目，开发者可以非常容易地在项目之间共享代码和功能，并且能够快速更新所有项目。此外，Monorepo还能够实现更好的代码复用、更轻松的版本控制、更高效的测试等诸多好处。</p>
<p>Monorepo可以应用于各种不同的软件开发领域和项目规模，但它特别适合大规模团队和复杂软件系统的开发。在这种情况下，使用Monorepo可以有效地防止代码重复，确保代码的一致性，并且能够更加高效地跨项目协作。</p>
<p>当然，与任何软件工程决策一样，Monorepo也有其自身的缺点和需要考虑的因素。比如，Monorepo的管理需要更高的技术复杂性和更长的学习曲线，需要确保代码库的安全性、稳定性和可用性等。但对于大多数团队而言，这些不足之处都能被很好地规避和管理。</p>
</blockquote>
<ol>
<li>如果有多个项目需要安装依赖时：</li>
</ol>
<p><a target="_blank" rel="noopener" href="https://pnpm.io/zh/pnpm-workspace_yaml">配置pnpm的依赖下载目录，就可以在项目根目录统一下载所有的依赖，不需要频繁的切换进行安装</a></p>
<ol start="2">
<li>筛选启动</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm -F react-demo dev</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>添加公共模块</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm -F main add common</span><br></pre></td></tr></table></figure>

<h3 id="三、无界微前端"><a href="#三、无界微前端" class="headerlink" title="三、无界微前端"></a>三、无界微前端</h3><h5 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h5><p>安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm i wujie wujie-vue3</span><br></pre></td></tr></table></figure>

<p>注册</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./style.css&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Wujie</span> <span class="keyword">from</span> <span class="string">&quot;wujie-vue3&quot;</span></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(<span class="title class_">Wujie</span>).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是主应用<span class="tag">&lt;/<span class="name">h1</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 子应用vue3 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">WujieVue</span> <span class="attr">name</span>=<span class="string">&quot;vue3&quot;</span> <span class="attr">url</span>=<span class="string">&quot;http://localhost:5176/&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">WujieVue</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 子应用react --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">WujieVue</span> <span class="attr">name</span>=<span class="string">&quot;react&quot;</span> <span class="attr">url</span>=<span class="string">&quot;http://localhost:5175/&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">WujieVue</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="四、二次封装无界"><a href="#四、二次封装无界" class="headerlink" title="四、二次封装无界"></a>四、二次封装无界</h3><p>安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">pnpm i vue -D</span><br><span class="line">pnpm i typescript -D</span><br><span class="line">pnpm i ts-loader -D</span><br><span class="line">pnpm i webpack webpack-cli -D</span><br></pre></td></tr></table></figure>

<p>封装</p>
<ul>
<li>index.ts</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineComponent, h, getCurrentInstance, onMounted, watch, onBeforeUnmount &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; startApp, bus &#125; <span class="keyword">from</span> <span class="string">&quot;wujie&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123; <span class="title class_">PropType</span> &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Props</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./type&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> wujie = <span class="title function_">defineComponent</span>(&#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">width</span>: &#123; <span class="attr">type</span>: <span class="title class_">String</span>, <span class="attr">default</span>: <span class="string">&quot;&quot;</span> &#125;,</span><br><span class="line">    <span class="attr">height</span>: &#123; <span class="attr">type</span>: <span class="title class_">String</span>, <span class="attr">default</span>: <span class="string">&quot;&quot;</span> &#125;,</span><br><span class="line">    <span class="attr">name</span>: &#123; <span class="attr">type</span>: <span class="title class_">String</span>, <span class="attr">default</span>: <span class="string">&quot;&quot;</span>, <span class="attr">required</span>: <span class="literal">true</span> &#125;,</span><br><span class="line">    <span class="attr">loading</span>: &#123; <span class="attr">type</span>: <span class="title class_">HTMLElement</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">url</span>: &#123; <span class="attr">type</span>: <span class="title class_">String</span>, <span class="attr">default</span>: <span class="string">&quot;&quot;</span>, <span class="attr">required</span>: <span class="literal">true</span> &#125;,</span><br><span class="line">    <span class="attr">sync</span>: &#123; <span class="attr">type</span>: <span class="title class_">Boolean</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">prefix</span>: &#123; <span class="attr">type</span>: <span class="title class_">Object</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">alive</span>: &#123; <span class="attr">type</span>: <span class="title class_">Boolean</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">props</span>: &#123; <span class="attr">type</span>: <span class="title class_">Object</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">attrs</span>: &#123; <span class="attr">type</span>: <span class="title class_">Object</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">replace</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;replace&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">fetch</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;fetch&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">fiber</span>: &#123; <span class="attr">type</span>: <span class="title class_">Boolean</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">degrade</span>: &#123; <span class="attr">type</span>: <span class="title class_">Boolean</span>, <span class="attr">default</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">    <span class="attr">plugins</span>: &#123; <span class="attr">type</span>: <span class="title class_">Array</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;plugins&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">beforeLoad</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;beforeLoad&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">beforeMount</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;beforeMount&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">afterMount</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;afterMount&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">beforeUnmount</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;beforeUnmount&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">afterUnmount</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;afterUnmount&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">activated</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;activated&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">    <span class="attr">deactivated</span>: &#123; <span class="attr">type</span>: <span class="title class_">Function</span> <span class="keyword">as</span> <span class="title class_">PropType</span>&lt;<span class="title class_">Props</span>[<span class="string">&#x27;deactivated&#x27;</span>]&gt;, <span class="attr">default</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props, &#123; emit &#125;</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> instance = <span class="title function_">getCurrentInstance</span>();</span><br><span class="line">    <span class="comment">// 微前端初始化完成</span></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">init</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">      <span class="title function_">startApp</span>(&#123;</span><br><span class="line">        <span class="attr">name</span>: props.<span class="property">name</span>,</span><br><span class="line">        <span class="attr">url</span>: props.<span class="property">url</span>,</span><br><span class="line">        <span class="attr">el</span>: instance?.<span class="property">refs</span>.<span class="property">wujie</span> <span class="keyword">as</span> <span class="title class_">HTMLElement</span>,</span><br><span class="line">        <span class="attr">loading</span>: props.<span class="property">loading</span>,</span><br><span class="line">        <span class="attr">alive</span>: props.<span class="property">alive</span>,</span><br><span class="line">        <span class="attr">fetch</span>: props.<span class="property">fetch</span>,</span><br><span class="line">        <span class="attr">props</span>: props.<span class="property">props</span>,</span><br><span class="line">        <span class="attr">attrs</span>: props.<span class="property">attrs</span>,</span><br><span class="line">        <span class="attr">replace</span>: props.<span class="property">replace</span>,</span><br><span class="line">        <span class="attr">sync</span>: props.<span class="property">sync</span>,</span><br><span class="line">        <span class="attr">prefix</span>: props.<span class="property">prefix</span>,</span><br><span class="line">        <span class="attr">fiber</span>: props.<span class="property">fiber</span>,</span><br><span class="line">        <span class="attr">degrade</span>: props.<span class="property">degrade</span>,</span><br><span class="line">        <span class="attr">plugins</span>: props.<span class="property">plugins</span>,</span><br><span class="line">        <span class="attr">beforeLoad</span>: props.<span class="property">beforeLoad</span>,</span><br><span class="line">        <span class="attr">beforeMount</span>: props.<span class="property">beforeMount</span>,</span><br><span class="line">        <span class="attr">afterMount</span>: props.<span class="property">afterMount</span>,</span><br><span class="line">        <span class="attr">beforeUnmount</span>: props.<span class="property">beforeUnmount</span>,</span><br><span class="line">        <span class="attr">afterUnmount</span>: props.<span class="property">afterUnmount</span>,</span><br><span class="line">        <span class="attr">activated</span>: props.<span class="property">activated</span>,</span><br><span class="line">        <span class="attr">deactivated</span>: props.<span class="property">deactivated</span>,</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 监听name和url变化</span></span><br><span class="line">    <span class="title function_">watch</span>([props.<span class="property">name</span>, props.<span class="property">url</span>], <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">init</span>();</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">// 事件监听</span></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">hanlderEmit</span> = (<span class="params">event: <span class="built_in">string</span>, ...args: <span class="built_in">any</span>[]</span>) =&gt; &#123;</span><br><span class="line">      <span class="title function_">emit</span>(event, ...args);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 初始化</span></span><br><span class="line">    <span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      bus.$onAll(hanlderEmit);</span><br><span class="line">      <span class="title function_">init</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 销毁</span></span><br><span class="line">    <span class="title function_">onBeforeUnmount</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      bus.$offAll(hanlderEmit);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="title function_">h</span>(<span class="string">&#x27;div&#x27;</span>, &#123;</span><br><span class="line">      <span class="attr">style</span>: &#123;</span><br><span class="line">        <span class="attr">width</span>: props.<span class="property">width</span>,</span><br><span class="line">        <span class="attr">height</span>: props.<span class="property">height</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">ref</span>: <span class="string">&quot;wujie&quot;</span> <span class="comment">// 方便以后读取</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 全局注册</span></span><br><span class="line">wujie.<span class="property">install</span> = <span class="keyword">function</span> (<span class="params">app: <span class="built_in">any</span></span>) &#123;</span><br><span class="line">  app.<span class="title function_">component</span>(<span class="string">&quot;wujieVue&quot;</span>, wujie);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> wujie;</span><br></pre></td></tr></table></figure>

<ul>
<li>type.ts</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123; plugin &#125; <span class="keyword">from</span> <span class="string">&#x27;wujie&#x27;</span></span><br><span class="line"><span class="keyword">type</span> lifecycle = <span class="function">(<span class="params">appWindow: Window</span>) =&gt;</span> <span class="built_in">any</span>;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Props</span> &#123;</span><br><span class="line">  <span class="comment">/** 唯一性用户必须保证 */</span></span><br><span class="line">  <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">  <span class="comment">/** 需要渲染的url */</span></span><br><span class="line">  <span class="attr">url</span>: <span class="built_in">string</span>;</span><br><span class="line">  <span class="comment">/** 需要渲染的html, 如果用户已有则无需从url请求 */</span></span><br><span class="line">  html?: <span class="built_in">string</span>;</span><br><span class="line">  <span class="comment">/** 渲染的容器 */</span></span><br><span class="line">  loading?: <span class="title class_">HTMLElement</span>;</span><br><span class="line">  <span class="comment">/** 路由同步开关， false刷新无效，但是前进后退依然有效 */</span></span><br><span class="line">  sync?: <span class="built_in">boolean</span>;</span><br><span class="line">  <span class="comment">/** 子应用短路径替换，路由同步时生效 */</span></span><br><span class="line">  prefix?: &#123; [<span class="attr">key</span>: <span class="built_in">string</span>]: <span class="built_in">string</span> &#125;;</span><br><span class="line">  <span class="comment">/** 子应用保活模式，state不会丢失 */</span></span><br><span class="line">  alive?: <span class="built_in">boolean</span>;</span><br><span class="line">  <span class="comment">/** 注入给子应用的数据 */</span></span><br><span class="line">  props?: &#123; [<span class="attr">key</span>: <span class="built_in">string</span>]: <span class="built_in">any</span> &#125;;</span><br><span class="line">  <span class="comment">/** js采用fiber模式执行 */</span></span><br><span class="line">  fiber?: <span class="built_in">boolean</span>;</span><br><span class="line">  <span class="comment">/** 子应用采用降级iframe方案 */</span></span><br><span class="line">  degrade?: <span class="built_in">boolean</span>;</span><br><span class="line">  <span class="comment">/** 自定义运行iframe的属性 */</span></span><br><span class="line">  attrs?: &#123; [<span class="attr">key</span>: <span class="built_in">string</span>]: <span class="built_in">any</span> &#125;;</span><br><span class="line">  <span class="comment">/** 自定义降级渲染iframe的属性 */</span></span><br><span class="line">  degradeAttrs?: &#123; [<span class="attr">key</span>: <span class="built_in">string</span>]: <span class="built_in">any</span> &#125;;</span><br><span class="line">  <span class="comment">/** 代码替换钩子 */</span></span><br><span class="line">  replace?: <span class="function">(<span class="params">codeText: <span class="built_in">string</span></span>) =&gt;</span> <span class="built_in">string</span>;</span><br><span class="line">  <span class="comment">/** 自定义fetch，资源和接口 */</span></span><br><span class="line">  fetch?: <span class="function">(<span class="params">input: RequestInfo, init?: RequestInit</span>) =&gt;</span> <span class="title class_">Promise</span>&lt;<span class="title class_">Response</span>&gt;;</span><br><span class="line">  <span class="comment">/** 子应插件 */</span></span><br><span class="line">  <span class="attr">plugins</span>: <span class="title class_">Array</span>&lt;plugin&gt;;</span><br><span class="line">  <span class="comment">/** 子应用生命周期 */</span></span><br><span class="line">  beforeLoad?: lifecycle;</span><br><span class="line">  <span class="comment">/** 没有做生命周期改造的子应用不会调用 */</span></span><br><span class="line">  beforeMount?: lifecycle;</span><br><span class="line">  afterMount?: lifecycle;</span><br><span class="line">  beforeUnmount?: lifecycle;</span><br><span class="line">  afterUnmount?: lifecycle;</span><br><span class="line">  <span class="comment">/** 非保活应用不会调用 */</span></span><br><span class="line">  activated?: lifecycle;</span><br><span class="line">  deactivated?: lifecycle;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123; <span class="title class_">Props</span> &#125; </span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="五、webpack-swc"><a href="#五、webpack-swc" class="headerlink" title="五、webpack+swc"></a>五、webpack+swc</h3><h5 id="webpack配置"><a href="#webpack配置" class="headerlink" title="webpack配置"></a>webpack配置</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">Configuration</span> &#125; = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type</span> &#123;<span class="type">Configuration</span>&#125;  // 配置智能提示</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/index.ts&#x27;</span>,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;index.js&#x27;</span>,</span><br><span class="line">    <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">&#x27;lib&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">externals</span>: &#123;</span><br><span class="line">    <span class="attr">vue</span>: <span class="string">&#x27;vue&#x27;</span>,</span><br><span class="line">    <span class="attr">wujie</span>: <span class="string">&#x27;wujie&#x27;</span>,</span><br><span class="line">    <span class="attr">library</span>: <span class="string">&#x27;wujievue&#x27;</span>,</span><br><span class="line">    <span class="attr">libraryTarget</span>: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    <span class="attr">umdNamedDefine</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.ts$/</span>,</span><br><span class="line">        <span class="attr">use</span>: <span class="string">&#x27;swc-loader&#x27;</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = config;</span><br></pre></td></tr></table></figure>

<h5 id="swc"><a href="#swc" class="headerlink" title="swc"></a>swc</h5><p><img src="https://cdn.staticaly.com/gh/codeslive/images-pages@main/2023/202306040142926.webp" alt="介绍"></p>
<p>安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">pnpm i -D @swc/core swc-loader</span><br><span class="line">pnpm i -D @swc/cli @swc/core</span><br></pre></td></tr></table></figure>

<p>esm</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;test&quot;</span><span class="punctuation">:</span> <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;lib&quot;</span><span class="punctuation">:</span> <span class="string">&quot;webpack&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;esm&quot;</span><span class="punctuation">:</span> <span class="string">&quot;swc src/index.ts -d esm&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<p>.swcrc</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;$schema&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://json.schemastore.org/swcrc&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;jsc&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;parser&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;syntax&quot;</span><span class="punctuation">:</span> <span class="string">&quot;typescript&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;target&quot;</span><span class="punctuation">:</span> <span class="string">&quot;es5&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;loose&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;externalHelpers&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="comment">// Requires v1.2.50 or upper and requires target to be es2016 or upper.</span></span><br><span class="line">    <span class="attr">&quot;keepClassNames&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;minify&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p>index.d.ts</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import &#123; bus, preloadApp, destroyApp, setupApp &#125; from &quot;wujie&quot;;</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123; <span class="title class_">App</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="title class_">WujieVue</span>: &#123;</span><br><span class="line">    <span class="comment">// bus: typeof bus;</span></span><br><span class="line">    <span class="comment">// setupApp: typeof setupApp;</span></span><br><span class="line">    <span class="comment">// preloadApp: typeof preloadApp;</span></span><br><span class="line">    <span class="comment">// destroyApp: typeof destroyApp;</span></span><br><span class="line">    <span class="attr">install</span>: <span class="function">(<span class="params">app: App</span>) =&gt;</span> <span class="built_in">void</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">WujieVue</span>;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="六、npm发布"><a href="#六、npm发布" class="headerlink" title="六、npm发布"></a>六、npm发布</h3><p>packjson</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;wujie-vue-setup&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;version&quot;</span><span class="punctuation">:</span> <span class="string">&quot;1.0.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;description&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;main&quot;</span><span class="punctuation">:</span> <span class="string">&quot;lib/index.js&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;module&quot;</span><span class="punctuation">:</span> <span class="string">&quot;esm/index.js&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;test&quot;</span><span class="punctuation">:</span> <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;lib&quot;</span><span class="punctuation">:</span> <span class="string">&quot;webpack&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;esm&quot;</span><span class="punctuation">:</span> <span class="string">&quot;swc src/index.ts -d esm&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;files&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">    <span class="string">&quot;lib&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="string">&quot;esm&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="string">&quot;index.d.ts&quot;</span></span><br><span class="line">  <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;keywords&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;author&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;license&quot;</span><span class="punctuation">:</span> <span class="string">&quot;ISC&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;dependencies&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;wujie&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.0.17&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;devDependencies&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;@swc/cli&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^0.1.62&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;@swc/core&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^1.3.62&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;swc-loader&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^0.2.3&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;ts-loader&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^9.4.3&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;typescript&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.1.3&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;vue&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^3.3.4&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;webpack&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.85.0&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;webpack-cli&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^5.1.1&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p>发布</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">mmp use</span><br><span class="line">npm adduser</span><br><span class="line">npm login</span><br><span class="line">npm publish</span><br></pre></td></tr></table></figure>

<h3 id="七、webpack5模块联邦技术"><a href="#七、webpack5模块联邦技术" class="headerlink" title="七、webpack5模块联邦技术"></a>七、webpack5模块联邦技术</h3><p><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306041338657.webp?x-oss-process=style/webp" alt="image-20230604133845896"></p>
<p><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306041339946.webp?x-oss-process=style/webp" alt="host"></p>
<p><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306041339456.webp?x-oss-process=style/webp" alt="效果"></p>
<p>webpack</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// remote</span></span><br><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">Configuration</span> &#125; = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ModuleFederationPlugin</span> = <span class="built_in">require</span>(<span class="string">&#x27;webpack/lib/container/ModuleFederationPlugin&#x27;</span>);</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type</span> &#123;<span class="type">Configuration</span>&#125;  // 配置智能提示</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./index.js&#x27;</span>,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">port</span>: <span class="number">9001</span>, <span class="comment">// remote</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./index.html&#x27;</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">ModuleFederationPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;remote&#x27;</span>,</span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;remoteEntry.js&#x27;</span>,</span><br><span class="line">      <span class="attr">exposes</span>: &#123;</span><br><span class="line">        <span class="string">&#x27;./addList&#x27;</span>: <span class="string">&#x27;./list.js&#x27;</span> <span class="comment">// 暴露模块的路径</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = config;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// host</span></span><br><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">Configuration</span> &#125; = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ModuleFederationPlugin</span> = <span class="built_in">require</span>(<span class="string">&#x27;webpack/lib/container/ModuleFederationPlugin&#x27;</span>);</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type</span> &#123;<span class="type">Configuration</span>&#125;  // 配置智能提示</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./index.js&#x27;</span>,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">port</span>: <span class="number">9002</span>, <span class="comment">// host</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./index.html&#x27;</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">ModuleFederationPlugin</span>(&#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;host&#x27;</span>,</span><br><span class="line">      <span class="attr">remotes</span>: &#123;</span><br><span class="line">        <span class="attr">remote</span>: <span class="string">&#x27;remote@http://localhost:9001/remoteEntry.js&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = config;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="https://codeslive.top">小康</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://codeslive.top/2023/06/03/%E5%BE%AE%E5%89%8D%E7%AB%AF/">https://codeslive.top/2023/06/03/%E5%BE%AE%E5%89%8D%E7%AB%AF/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101148806.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/06/05/%E8%B7%A8%E5%9F%9F+%E5%9B%9B%E7%A7%8D%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/" title="跨域+四种解决办法"><img class="cover" src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306051045871.webp?x-oss-process=style/webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">Previous Post</div><div class="prev_info">跨域+四种解决办法</div></div></a></div><div class="next-post pull-right"><a href="/2023/05/28/OSI-%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B/" title="OSI-七层模型"><img class="cover" src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202305281922613.webp?x-oss-process=style/webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">Next Post</div><div class="next_info">OSI-七层模型</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306101307395.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">小康</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">16</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">0</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">5</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/codeslive"><i class="fab fa-github"></i><span>关注我</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">别问我为什么沉默，时间比我能告诉你的更多。</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BE%AE%E5%89%8D%E7%AB%AF"><span class="toc-number">1.</span> <span class="toc-text">微前端</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81webComponents"><span class="toc-number">1.0.1.</span> <span class="toc-text">一、webComponents</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81pnpm%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86%E5%92%8Cmonorepo%E6%9E%B6%E6%9E%84"><span class="toc-number">1.0.2.</span> <span class="toc-text">二、pnpm底层原理和monorepo架构</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#pnpm"><span class="toc-number">1.0.2.0.1.</span> <span class="toc-text">pnpm</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#monorepo%E6%9E%B6%E6%9E%84"><span class="toc-number">1.0.2.0.2.</span> <span class="toc-text">monorepo架构</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%97%A0%E7%95%8C%E5%BE%AE%E5%89%8D%E7%AB%AF"><span class="toc-number">1.0.3.</span> <span class="toc-text">三、无界微前端</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.0.3.0.1.</span> <span class="toc-text">基本使用</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85%E6%97%A0%E7%95%8C"><span class="toc-number">1.0.4.</span> <span class="toc-text">四、二次封装无界</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81webpack-swc"><span class="toc-number">1.0.5.</span> <span class="toc-text">五、webpack+swc</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#webpack%E9%85%8D%E7%BD%AE"><span class="toc-number">1.0.5.0.1.</span> <span class="toc-text">webpack配置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#swc"><span class="toc-number">1.0.5.0.2.</span> <span class="toc-text">swc</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AD%E3%80%81npm%E5%8F%91%E5%B8%83"><span class="toc-number">1.0.6.</span> <span class="toc-text">六、npm发布</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%83%E3%80%81webpack5%E6%A8%A1%E5%9D%97%E8%81%94%E9%82%A6%E6%8A%80%E6%9C%AF"><span class="toc-number">1.0.7.</span> <span class="toc-text">七、webpack5模块联邦技术</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/06/26/JWT%EF%BC%88%E9%89%B4%E6%9D%83%EF%BC%89/" title="JWT（鉴权）"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306261848915.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JWT（鉴权）"/></a><div class="content"><a class="title" href="/2023/06/26/JWT%EF%BC%88%E9%89%B4%E6%9D%83%EF%BC%89/" title="JWT（鉴权）">JWT（鉴权）</a><time datetime="2023-06-26T10:46:25.846Z" title="Created 2023-06-26 18:46:25">2023-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/24/SSL%20TSL%20HTTPS/" title="SSL TSL HTTPS"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306111114693.png?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SSL TSL HTTPS"/></a><div class="content"><a class="title" href="/2023/06/24/SSL%20TSL%20HTTPS/" title="SSL TSL HTTPS">SSL TSL HTTPS</a><time datetime="2023-06-24T09:55:09.942Z" title="Created 2023-06-24 17:55:09">2023-06-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/11/XSS%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB/" title="XSS跨站脚本攻击"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306111114693.png?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="XSS跨站脚本攻击"/></a><div class="content"><a class="title" href="/2023/06/11/XSS%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB/" title="XSS跨站脚本攻击">XSS跨站脚本攻击</a><time datetime="2023-06-11T03:10:26.561Z" title="Created 2023-06-11 11:10:26">2023-06-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/05/%E5%85%B3%E4%BA%8E%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%88%B7%E6%96%B0%E4%B8%A2%E5%A4%B1%E7%9A%84%E9%97%AE%E9%A2%98/" title="关于动态路由刷新丢失的问题"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306052004251.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="关于动态路由刷新丢失的问题"/></a><div class="content"><a class="title" href="/2023/06/05/%E5%85%B3%E4%BA%8E%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%88%B7%E6%96%B0%E4%B8%A2%E5%A4%B1%E7%9A%84%E9%97%AE%E9%A2%98/" title="关于动态路由刷新丢失的问题">关于动态路由刷新丢失的问题</a><time datetime="2023-06-05T12:00:12.830Z" title="Created 2023-06-05 20:00:12">2023-06-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/05/TCP%E5%AE%9E%E7%8E%B0http%E6%9C%8D%E5%8A%A1/" title="TCP实现http服务"><img src="https://static-youdao-note.oss-cn-shenzhen.aliyuncs.com/images/202306051707718.webp?x-oss-process=style/webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TCP实现http服务"/></a><div class="content"><a class="title" href="/2023/06/05/TCP%E5%AE%9E%E7%8E%B0http%E6%9C%8D%E5%8A%A1/" title="TCP实现http服务">TCP实现http服务</a><time datetime="2023-06-05T09:01:56.797Z" title="Created 2023-06-05 17:01:56">2023-06-05</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2023 By 小康</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="//beian.miit.gov.cn/"><center>粤ICP备2021164535号-2</center></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>